<template>
  <view class="content">
    <uni-nav-bar 
      title="微信API调试" 
      left-icon="back" 
      @clickLeft="handleBack"
      fixed 
      placeholder>
    </uni-nav-bar>
    
    <view class="container">
      <!-- 调试信息 -->
      <uni-section title="调试信息" type="line">
        <view class="debug-info">
          <text class="info-item">平台: {{ platform }}</text>
          <text class="info-item">是否微信小程序: {{ isWechatMP }}</text>
        </view>
      </uni-section>
      
      <!-- 用户信息获取 -->
      <uni-section title="用户信息获取" type="line">
        <view class="section-content">
          <button type="primary" @click="testGetUserProfile">测试getUserProfile</button>
          <button type="primary" @click="testGetSetting">测试getSetting</button>
          <button type="primary" @click="testLogin">测试微信登录</button>
        </view>
      </uni-section>
      
      <!-- 结果展示 -->
      <uni-section title="结果展示" type="line">
        <view class="result-container">
          <scroll-view scroll-y class="result-scroll">
            <text class="result-text">{{ result }}</text>
          </scroll-view>
        </view>
      </uni-section>
      
      <!-- 操作按钮 -->
      <uni-section title="操作" type="line">
        <view class="section-content">
          <button type="warn" @click="clearResult">清空结果</button>
        </view>
      </uni-section>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
// 导入uni-ui组件
import uniNavBar from '@dcloudio/uni-ui/lib/uni-nav-bar/uni-nav-bar.vue'
import uniSection from '@dcloudio/uni-ui/lib/uni-section/uni-section.vue'

// 响应式数据
const result = ref('')
const platform = ref('')

// 计算属性
const isWechatMP = computed(() => {
  // #ifdef MP-WEIXIN
  return true
  // #endif
  // #ifndef MP-WEIXIN
  return false
  // #endif
})

// 方法
const handleBack = () => {
  uni.navigateBack()
}

// 获取平台信息
const getPlatformInfo = () => {
  // #ifdef APP-PLUS
  platform.value = 'App'
  // #endif
  // #ifdef H5
  platform.value = 'H5'
  // #endif
  // #ifdef MP-WEIXIN
  platform.value = '微信小程序'
  // #endif
  // #ifdef MP-ALIPAY
  platform.value = '支付宝小程序'
  // #endif
  // #ifdef MP-BAIDU
  platform.value = '百度小程序'
  // #endif
  // #ifdef MP-TOUTIAO
  platform.value = '头条小程序'
  // #endif
  // #ifdef MP-QQ
  platform.value = 'QQ小程序'
  // #endif
}

// 测试getUserProfile
const testGetUserProfile = async () => {
  try {
    appendResult('开始测试getUserProfile...')
    
    // #ifndef MP-WEIXIN
    appendResult('错误: 当前环境不是微信小程序')
    return
    // #endif
    
    uni.showLoading({ title: '获取中...' })
    
    uni.getUserProfile({
      desc: '用于完善用户资料',
      success: (res) => {
        uni.hideLoading()
        appendResult('getUserProfile成功:')
        appendResult(JSON.stringify(res, null, 2))
      },
      fail: (err) => {
        uni.hideLoading()
        appendResult('getUserProfile失败:')
        appendResult(JSON.stringify(err, null, 2))
      }
    })
  } catch (err) {
    uni.hideLoading()
    appendResult('异常:')
    appendResult(JSON.stringify(err, null, 2))
  }
}

// 测试getSetting
const testGetSetting = async () => {
  try {
    appendResult('开始测试getSetting...')
    
    // #ifndef MP-WEIXIN
    appendResult('错误: 当前环境不是微信小程序')
    return
    // #endif
    
    uni.showLoading({ title: '获取中...' })
    
    uni.getSetting({
      success: (res) => {
        uni.hideLoading()
        appendResult('getSetting成功:')
        appendResult(JSON.stringify(res, null, 2))
      },
      fail: (err) => {
        uni.hideLoading()
        appendResult('getSetting失败:')
        appendResult(JSON.stringify(err, null, 2))
      }
    })
  } catch (err) {
    uni.hideLoading()
    appendResult('异常:')
    appendResult(JSON.stringify(err, null, 2))
  }
}

// 测试微信登录
const testLogin = async () => {
  try {
    appendResult('开始测试微信登录...')
    
    // #ifndef MP-WEIXIN
    appendResult('错误: 当前环境不是微信小程序')
    return
    // #endif
    
    uni.showLoading({ title: '登录中...' })
    
    uni.login({
      provider: 'weixin',
      success: (res) => {
        uni.hideLoading()
        appendResult('微信登录成功:')
        appendResult(JSON.stringify(res, null, 2))
      },
      fail: (err) => {
        uni.hideLoading()
        appendResult('微信登录失败:')
        appendResult(JSON.stringify(err, null, 2))
      }
    })
  } catch (err) {
    uni.hideLoading()
    appendResult('异常:')
    appendResult(JSON.stringify(err, null, 2))
  }
}

// 添加结果到展示区域
const appendResult = (text) => {
  result.value += '\n' + text
}

// 清空结果
const clearResult = () => {
  result.value = ''
}

// 页面加载时获取平台信息
getPlatformInfo()
</script>

<style scoped>
.content {
  padding: 20rpx;
}

.container {
  padding-top: var(--status-bar-height);
}

.debug-info {
  padding: 20rpx;
}

.info-item {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.section-content {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.section-content button {
  margin: 0;
}

.result-container {
  padding: 20rpx;
  height: 400rpx;
}

.result-scroll {
  height: 100%;
  background-color: #f5f5f5;
  padding: 20rpx;
  border-radius: 10rpx;
}

.result-text {
  font-size: 24rpx;
  line-height: 1.5;
  color: #333;
  font-family: monospace;
  white-space: pre-wrap;
}
</style>